<template>
  <div>
    <el-descriptions
      class="margin-top"
      :column="2"
      :size="size"
      :model="formData"
      border
    >
      <template slot="extra">
        <el-button @click="block">返回</el-button>
      </template>
        <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          用户头像
        </template>
        <el-image style="height: 100px" :src="'http://101.43.223.224:8765/image/getImageById?id=' + formData.img">
        </el-image>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名称
        </template>
        {{formData.frontDeskName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          用户账户
        </template>
        {{formData.frontDeskAccount}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          会员状态
        </template>
        {{formData.frontDeskMember}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          用户手机号
        </template>
        {{formData.frontDeskPhone}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          会员到期时间
        </template>
        {{formData.frontDeskMemberTime}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          用户邮箱
        </template>
        {{formData.frontDeskEmail}}
      </el-descriptions-item>
            <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          账号状态
        </template>
        <el-tag type="danger" v-if="formData.accountType==1">
                禁用
            </el-tag>
            <el-tag type="success" v-else>
                正常
            </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          创建时间
        </template>
        {{formData.createTime}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          封禁时间
        </template>
        {{formData.banTime}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          修改时间
        </template>
        {{formData.updateTime}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          封禁剩余
        </template>
        {{formData.remainingTime}}天
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      size: "medium",
      formData: {
        remainingTime:''
      },
      id:""
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getfrontdeskuser(this.$route.query.rowid)
  },
  methods: {
    getfrontdeskuser(rowid) {
      // 查询所需数据(全查)
      this.$axios
        .get("/FrontDeskUser/queryById", {
          params: {
            id: rowid,
          },
        })
        .then((res) => {
          if (res.data.code=200) {
            //
            this.formData = res.data.data.data;
            if(this.formData.banTime !== null){
              const currentDate = new Date(); // 当前日期
              const targetDate = new Date(this.formData.banTime); // 目标日期
              const timeDiff = targetDate.getTime() - currentDate.getTime();
              const remainingDays = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
              this.formData.remainingTime = remainingDays
              this.getfrontDeskMember()
            } else {
              this.formData.remainingTime = 0
            }
            
          }
          this.loading = false; // 加载圈绑定
        })
        .catch((err) => {
          // this.myMessage('error', err),
        });
    },
    getfrontDeskMember() {// 会员状态赋值
            if (this.formData.frontDeskMember === 0) {
                this.formData.frontDeskMember = "普通用户";
            } else if (this.formData.frontDeskMember === 1) {
                this.formData.frontDeskMember = "月卡会员";
            } else if (this.formData.frontDeskMember === 2) {
                this.formData.frontDeskMember = "季卡会员";
            } else {
                this.formData.frontDeskMember = "年卡会员";
            }
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    block(){
      this.$router.push('/frontdeskuser')
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style>
.el-descriptions__header {
    display: block;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
</style>
